<template>
  <div class="mod-config">
      <el-button-group style="margin-bottom: 10px;">
        <el-button icon="el-icon-search" type="primary" @click="searchHandle">查询</el-button>
        <el-button icon="el-icon-delete" type="primary" @click="searchReset">清空</el-button>
        <el-button v-if="permissions.eims_customer_add" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-button-group>
      <el-form inline :model="dataForm" @keyup.enter.native="searchHandle">
        <el-form-item label="客户名称">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="客户卡号">
          <el-input v-model="dataForm.customerCard"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="dataForm.phone1"></el-input>
        </el-form-item>
        <el-form-item label="会员性别">
          <el-select v-model="dataForm.gender" placeholder="会员性别" clearable>
            <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="微信会员">
          <el-select v-model="dataForm.wechatVip" placeholder="微信会员" clearable>
            <el-option v-for="item in wechatVipOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="dataForm.saleDeptId" placeholder="部门" clearable>
            <el-option v-for="item in saleDeptOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送短信">
          <el-select v-model="dataForm.sendMsg" placeholder="是否发送短信" clearable>
            <el-option v-for="item in sendMsgOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-select v-model="dataForm.status" placeholder="启用状态" clearable>
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.ageMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.ageMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="积分范围">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.integralMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.integralMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" height="calc(100vh - 215px)" border v-loading="dataListLoading" :max-height="tableHeight">
          <el-table-column prop="customerCard" label="客户卡号"></el-table-column>
          <el-table-column prop="name" label="客户名称"></el-table-column>
          <el-table-column prop="integral" label="医院积分余额">
            <template slot-scope="scope">
              <span v-if="scope.row.integral > 0">{{scope.row.integral}}</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column prop="storesIntegral" label="门店积分余额"></el-table-column>
          <el-table-column prop="cardType" label="客户类型">
            <template slot-scope="scope">
              <span v-if="scope.row.cardType == '1'">会员卡</span>
              <span v-else>非会员</span>
            </template>
          </el-table-column>
          <el-table-column prop="gender" label="客户性别">
            <template slot-scope="scope">
              <span v-if="scope.row.gender == '0'">男</span>
              <span v-if="scope.row.gender == '1'">女</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="客户年龄"></el-table-column>
          <el-table-column prop="phone1" label="联系电话"></el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-collection" @click="joinFamilyInfo(scope.row.id)" v-if="showFamily">加入家庭组</el-button>
              <el-button type="text" icon="el-icon-collection" @click="createFamilyInfo(scope.row.id)" v-if="showFamily">创建家庭组</el-button>
              <el-button type="text" icon="el-icon-collection" @click="checkCustomerDetail(scope.row.id)">详情</el-button>
              <el-button v-if="permissions.eims_customer_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button v-if="permissions.eims_customer_del" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next"></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <!-- 弹窗，会员详情信息 -->
      <customer-detail v-if="customerDetailVisible" ref="customerDetail"></customer-detail>
      <!-- 弹窗，会员详情信息 -->
      <join-family v-if="joinFamilyVisible" ref="joinFamily" @refreshDataList="getDataList"></join-family>
      <!-- 创建家庭组 -->
      <create-family v-if="createVisible" ref="createDialog" @refreshData="getDataList"></create-family>
  </div>
</template>

<script>
  import { mapGetters } from "vuex"
  import { filterParams } from "@/util/tools";
  import { fetchCustomerList, delCustomerObj } from "@/api/eims/customer"
  import { getDeptInfoByDeptType, getObj } from "@/api/admin/dept";
  import { getShowFlag, getInfoByPublicKey } from '@/api/admin/sys-public-param'

  import TableForm from "./form"
  import CustomerDetail from "./detail"
  import JoinFamily from "../familygroup/joinfamilygroup-form"
  import CreateFamily from '../familygroup/createfamilygroup-form'

  export default {
    data() {
      return {
        dataForm: {
          key: ""
        },
        showFamily: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        customerDetailVisible: false,
        joinFamilyVisible: false,
        createVisible: false,
        genderOptions: [{value: 0,label: "男"},{value: 1,label: "女"}],
        saleDeptOptions: [],
        wechatVipOptions: [{value: 1,label: "是"},{value: 0,label: "否"}],
        statusOptions: [{value: "1",label: "是"},{value: "0",label: "否"}],
        sendMsgOptions: [{value: 1,label: "发送"},{value: 0,label: "不发送"}]
      };
    },
    components: {
      TableForm,
      CustomerDetail,
      JoinFamily,
      CreateFamily
    },
    created() {
      this.setShow();
      this.getDataList();
      this.getDeptList();
    },
    computed: {
      ...mapGetters(["permissions", "userInfo"]),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //是否显示加入/创建家庭组
      setShow() {
        this.showFamily = false
        getInfoByPublicKey("FAMILY_FLAG").then(response => {
          if(response.data.code == '0'){
            let param = response.data.data
            if (param.publicValue) {
              if (param.linkType == 1) {
                //根据部门查询
                getShowFlag('FAMILY_FLAG', 1, this.userInfo.lessDeptId).then(result => {
                  if(result.data.code == '0'){
                    this.showFamily = result.data.data
                  }else{
                    this.$message.error(result.data.msg)
                  }
                })
              } else {
                //根据单位查询
                getObj(this.userInfo.lessDeptId).then(result => {
                  if(result.data.code == '0'){
                    let unitId = result.data.data.unitId
                    getShowFlag('FAMILY_FLAG', 2, unitId).then(result1 => {
                      if(result1.data.code == '0'){
                        this.showFamily = result1.data.data
                      }else{
                        this.$message.error(result1.data.msg)
                      }
                    })
                  }else{
                    this.$message.error(result.data.msg)
                  }
                })
              }
            }
          }else{
            this.$message.error(response.data.msg)
          }

        })
      },
      // 获取数据列表
      getDataList() {
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        };
        let params2 = filterParams(this.dataForm);
        this.dataListLoading = true;
        fetchCustomerList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records;
            this.totalPage = response.data.data.total;
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false;
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      // 删除
      deleteHandle(id) {
        this.$confirm("是否确认删除ID为" + id, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(function() {
            return delCustomerObj(id);
          })
          .then(response => {
            if(response.data.code == '0'){
              this.$message.success("删除成功");
              this.getDataList();
            }else{
              this.$message.error(response.data.msg)
            }
          });
      },
      // 搜索清空
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = "";
        }
      },
      // 查看会员信息详情
      checkCustomerDetail(id) {
        this.customerDetailVisible = true;
        this.$nextTick(() => {
          this.$refs.customerDetail.init(id, "会员详细");
        });
      },
      // 加入家庭组
      joinFamilyInfo(id) {
        this.joinFamilyVisible = true;
        this.$nextTick(() => {
          this.$refs.joinFamily.init(id);
        });
      },
      // 创建家庭组
      createFamilyInfo(id) {
        this.createVisible = true
        this.$nextTick(() => {
          this.$refs.createDialog.init(id)
        })
      },
      getDeptList() {
        getDeptInfoByDeptType(1).then(response => {
          if(response.data.code == '0'){
            let result = response.data.data;
            let list = [];
            result.forEach(item => {
              list.push({
                value: item.id,
                label: item.name
              });
            });
            this.saleDeptOptions = list;
          }else{
            this.$message.error(response.data.msg)
          }
          
        });
      }
    },

  };
</script>
